<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="工号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workNo">
              <a-input v-model="model.workNo" :maxLength="30" placeholder="请输入工号" @blur="rapeatPhone('workNo','work_no',model.workNo)"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realname">
              <a-input v-model="model.realname" :maxLength="30" placeholder="请输入姓名"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sex">
              <j-dict-select-tag v-model="model.sex" placeholder="请选择性别" dictCode="sex" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="班级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="classCodes">
              <!-- <j-dict-select-tag type="list" v-model="model.classCodes" dictCode="sk_class,class_name,id,del_flag = 0 order by sort_no asc" placeholder="请选择班级" /> -->
              <j-multi-select-tag
                v-model="model.classCodes"
                dictCode="sk_class,class_name,id,del_flag = 0 order by sort_no asc"
                placeholder="请选择班级">
              </j-multi-select-tag>
              <!-- <a-select ref="select" v-model="model.classCodes" placeholder="请选择班级" mode="multiple">
                <a-select-option v-for="item in classCodesList" :key="item.id" :value="item.id">{{
                  item.className
                }}</a-select-option>
              </a-select> -->
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="教师职务" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="post">
            <j-select-position placeholder="请选择教师职务" :multiple="false" v-model="model.post" />
          </a-form-model-item>
            <!-- <a-form-model-item label="教师类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="teacherType">
              <j-dict-select-tag
                type="list"
                v-model="model.teacherType"
                dictCode="teacher_type"
                placeholder="请选择教师类型"
              />
            </a-form-model-item> -->
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="证件类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idType">
              <j-dict-select-tag
                type="list"
                v-model="model.idType"
                dictCode="certificate_type"
                placeholder="请选择证件类型"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="证件号码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idCode">
              <a-input v-model="model.idCode" :maxLength="30" placeholder="请输入证件号码"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="出生日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-date-picker style="width:100%;" v-model="model.birthday" placeholder="请选择出生日期" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
              <a-input v-model="model.phone" placeholder="请输入手机号码" @blur="rapeatPhone('phone','phone',model.phone)"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email">
              <a-input v-model="model.email" :maxLength="30" placeholder="请输入邮箱"></a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24">
            <a-form-model-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="selectedRoles">
              <j-select-position placeholder="请选择职务" :multiple="false" v-model="model.selectedRoles"/>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24">
            <a-form-model-item label="角色" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="selectedRoles">
              <j-multi-select-tag
                v-model="model.selectedRoles"
                dictCode="sys_role,role_name,id"
                placeholder="请选择角色"
              />
              <!-- <a-select
                ref="select"
                v-model="model.selectedRoles"
                placeholder="请选择角色"
                mode="multiple"
              >
                <a-select-option v-for="item in rolesOptions" :key="item.id" :value="item.id">{{ item.roleName }}</a-select-option>
              </a-select> -->
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="毕业院校" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="university">
              <a-input v-model="model.university" :maxLength="50" placeholder="请输入毕业院校"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="毕业证书" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="certificateFileId">
              <j-image-upload :number="imgMaxNumber" isMultiple   v-model="model.certificateFileId"></j-image-upload>
              <div v-if="!formDisabled">最多上传 <span style="color: #f5222d;">{{ imgMaxNumber }}</span> 张毕业证书照片</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="资格证书" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="credentialsFileId">
              <j-image-upload :number="imgMaxNumber" isMultiple   v-model="model.credentialsFileId"></j-image-upload>
              <div  v-if="!formDisabled">最多上传 <span style="color: #f5222d;">{{ imgMaxNumber }}</span> 张资格证书照片</div>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import { validateMobile, validateIdCard } from '@/utils/rules.js'
import { queryall } from '@/api/api'
import { skClassList } from '@/api/management.js'
export default {
  name: 'SkStaffForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      imgMaxNumber:5,
      rolesOptions: [],
      classCodesList: [], //班级
      model: {
        birthday:null,
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        workNo: [
          { required: true, message: '请输入工号' },
        ],
        realname: [{ required: true, message: '请输入姓名' }],
        sex: [{ required: true, message: '请选择性别' }],
        // classCodes: [{ required: true, message: '请选择班级' }],
        idType: [{ required: true, message: '请选择证件类型' }],
        post: [{ required: true, message: '请选择教师职务' }],
        phone: [
          { required: true, message: '请输入手机号' }, 
          { validator: validateMobile }
        ],
        idCode: [{ required: true, message: '请输入证件号码' }],
        selectedRoles: [{ required: true, message: '请选择角色' }]
      },
      url: {
        add: '/management/teacher/add',
        edit: '/management/teacher/edit',
        queryById: '/management/teacher/queryById'
      }
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
    // 是否显示 无上传 文字
    uploadFileShow(){
        return function(code){
          return (!this.model[code] && !this.formDisabled) || (this.model[code] && this.formDisabled)||(this.model[code] && !this.formDisabled)
        }
      }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  mounted() {},
  activated(){
  },
  methods: {
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    // 手机号效验
    rapeatPhone(code,column,value){
      if (this.model.phone != "") {
        let url = "/management/teacher/check";
        let params = {
          column:column,
          value:value
        }
        getAction(url,params).then((res)=>{
          if(res.success){
            if (res.result) {
              this.model[code] = "";
              this.$message.warning("填写重复，请重新填写！");
            }
          } else {
            this.$message.warning(res.message);
          }
          this.$emit("confirmLoading",false)
        }).catch((error)=>{
          console.error(error);
        })
      }
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          this.$emit("modelLoading",that.confirmLoading)
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
              this.$emit("modelLoading",false)
            })
            .finally(() => {
              that.confirmLoading = false
              this.$emit("modelLoading",that.confirmLoading)
            })
        }
      })
    }
  }
}
</script>
